<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,span,p {
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border:#000 1px solid;
            float:left;
            font-size:17px;
            font-family:Verdana;
        }
        div.mini {
            width:55px;
            height:55px;
            background-color: #aaa;
            font-size:12px;
        }
        div.hide {
            display:none;
        }
    </style>
    <script src="../../jquery.min.js"></script>
    <script>
        /*
         辅助例子
         1,自动重置
         2,给元素添加动画
         */

        $(document).ready(function(){
            //手动重置页面元素
            $("#reset").click(function(){
                $("*").removeAttr("style");
                $("div[class=none]").css({"display":"none"});
            });
            //判断是否自动重置
            $("input[type=button]").click(function(){
                if($("#isreset").is(":checked")){
                    $("#reset").click();
                }
            });
            //给id为mover的元素添加动画.
            function animateIt() {
                $("#mover").slideToggle("slow", animateIt);
            }
            animateIt();
        })
    </script>
    <script>
        $(function () {
            //选择第一个div元素.
            $('#btn1').click(function(){
                $('div:first').css("background","#bfa");
            })
            //选择最后一个div元素.
            $('#btn2').click(function(){
                $('div:last').css("background","#bfa");
            })
            //选择class不为one的 所有div元素.
            $('#btn3').click(function(){
                $('div:not(.one)').css("background","#bfa");
            })
            //选择 索引值为偶数 的div元素。
            $('#btn4').click(function(){
                $('div:even').css("background","#bfa");
            })
            //选择 索引值为奇数 的div元素。
            $('#btn5').click(function(){
                $('div:odd').css("background","#bfa");
            })
            //选择 索引等于 9 的元素
//一定注意，这个地方的eq中的索引是从0开始的，有dom层级嵌套的话，比如1》1个,2》3个，那么
//最后一个就是eq(5)
            $('#btn6').click(function(){
                $('div:eq(9)').css("background","#bfa");
            })
            //选择 索引大于 3 的元素
            $('#btn7').click(function(){
                $('div:gt(3)').css("background","#bfa");
            })
            //选择 索引小于 3 的元素
            $('#btn8').click(function(){
                $('div:lt(3)').css("background","#bfa");
            })
            //选择 所有的标题元素.比如h1, h2, h3等等...
            $('#btn9').click(function(){
                $(':header').css("background","#bfa");
            })
            //选择 当前正在执行动画的所有元素.
            $('#btn10').click(function(){
                $(':animated').css("background","#bfa");
            });

        })
    </script>
</head>
<body>
    <h3>基本过滤选择器.</h3>
    <button id="reset">手动重置页面元素</button>
    <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

    <input type="button" value="选择第一个div元素." id="btn1"/>
    <input type="button" value="选择最后一个div元素." id="btn2"/>
    <input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
    <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
    <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
    <input type="button" value="选择索引值等于3的元素." id="btn6"/>
    <input type="button" value="选择索引值大于3的元素." id="btn7"/>
    <input type="button" value="选择索引值小于3的元素." id="btn8"/>
    <input type="button" value="选择所有的标题元素." id="btn9"/>
    <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>

    <br /><br />

    <!-- 测试的元素 -->
    <div class="one" id="one" >
        id为one,class为one的div
        <div class="mini">class为mini</div>
    </div>

    <div class="one"  id="two" title="test" >
        id为two,class为one,title为test的div.
        <div class="mini"  title="other">class为mini,title为other</div>
        <div class="mini"  title="test">class为mini,title为test</div>
    </div>

    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini-8</div>
        <div class="mini">9</div>
    </div>



    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"  title="tesst">class为mini,title为tesst</div>
    </div>


    <div style="display:none;"  class="none">style的display为"none"的div</div>

    <div class="hide">class为"hide"的div</div>

    <div>
        包含input的type为"hidden"的div<input type="hidden" size="8"/>
    </div>


    <span id="mover">正在执行动画的span元素.</span>

</body>
</html>